<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/details.css">
    <link rel="stylesheet" href="Sort-backup.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="nav"> 
        <div class="nav-c">
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <div class="nav-text">
                <ul class="nav-ul">
                    <li class="deta">
                        <a class="deta-big" href="#">首页</a>
                    </li>
                    <li class="deta">
                        <a class="deta-a" href="#">女装</a>
                    </li>
                    <li class="deta">
                        <a class="deta-a" href="#">男装</a>
                    </li>
                    <li class="deta">
                        <a class="deta-a" href="#">箱包</a>
                    </li>
                    <li class="deta-margin0">
                        <a class="deta-a" href="#">配饰</a>
                    </li>
                </ul>
                
            </div>
            <div class="nav-input">
                <input class="bar" type="text" placeholder="搜索商品名/商品编号">
                <a href="">
                    <img class="input-img" src="images/形状.png" alt="">
                </a>
            </div>
            <div class="nav-shop">
                <a class="shop-img" href="">
                    <img class="like" src="images/like.png" alt="">
                </a>
                <a class="shop-img" href="">
                    <img class="shoping" src="images/购物车.png" alt="">
                </a>
                <a class="shop-img-margin0" href="">
                    <img class="mine" src="images/编组.png" alt="">
                </a>
            </div>
        </div>
    </div>


    <!-- 商品详情 -->
    <div class="container .clearflx">

        <!-- 商品版心 -->
        <div class="container-c clearflx">
            <!-- 选购详情 -->
            <div class="show clearflx">
                <!-- 商品列表图 -->
                <ul class="show-nav clearflx">
                    <span class="show-arrow show-arrow-up"></span>
                    <li class="shou-item">
                        <img class="shou-img" src="images/编组 4.png" alt="">
                    </li>
                    <li class="shou-item">
                        <img class="shou-img" src="images/编组 4.png" alt="">
                    </li>
                    <li class="shou-item">
                        <img class="shou-img" src="images/编组 4.png" alt="">
                    </li>
                    <li class="shou-item">
                        <img class="shou-img" src="images/编组 4.png" alt="">
                    </li>
                    <li class="shou-item">
                        <img class="shou-img" src="images/编组 4.png" alt="">
                    </li>
                    <span class="show-arrow show-arrow-down"></span>
                </ul>

                <!-- 大图 -->
                <img class="master-c" src="images/master-c.png" alt="">

                <!-- 详情介绍 -->
                <div class="introduce">
                    <h3>
                        女装外套 牛仔短茄克 春季上新 牛仔外套 水洗产品【100%棉】448126
                    </h3>
                    <div class="price">
                        <span>￥399.00</span>
                        <span>初上市价格¥499.00</span>
                    </div>

                    <!-- 颜色数量 -->
                    <div class="introduce-color-num">
                        <div class="introduce-color">
                            <p class="color">颜色:</p>
                            <ul class="color-list">
                                <li class="color-ietm li1"></li>
                                <li class="color-ietm li2"></li>
                                <li class="color-ietm li3"></li>
                                <li class="color-ietm li4"></li>
                            </ul>
                        </div>

                        <div class="introduce-num">
                            <p class="num">数量:</p>
                            <img class="num-plus num-l" src="images/加.png" alt="">
                            <input type="text" value="1" class="num-input num-l">
                            <img class="num-minus num-l" src="images/减.png" alt="">
                        </div>
                    </div>

                    <!-- 尺寸 -->
                    <div class="clothing-size">
                        <ul class="size-list">
                            <li class="size-ietm">150/76A/XS</li>
                            <li class="size-ietm">155/80A/S</li>
                            <li class="size-ietm">160/84A/M</li>
                            <li class="size-ietm">160/88A/L</li>
                            <li class="size-ietm">165/92A/XL</li>
                            <li class="size-ietm">170/100B/XXL</li>
                            <li class="size-ietm">175/108C/3XL</li>
                        </ul>
                    </div>

                    <!-- 配送方式 -->
                    <div class="mode-of clearflx">
                        <span class="mode">配送方式:</span>
                        <div class="input-radio">
                            <div class="input-left">
                                <img src="images/单选.png" alt="">
                                <input class="radio-mode" type="radio" name="mode-of"><span>快递配送</span>
                            </div>
                            <div class="input-right">
                                <img src="images/单选备份.png" alt="">
                                <input class="radio-mode" type="radio" name="mode-of"><span>门店自提</span>
                            </div>
                        </div>
                    </div>

                    <div class="welfare">
                        <p>支持30天无理由退换货</p>


                        <!-- <img src="images/like.png" alt="">
                        <img src="images/分享.png" alt=""> -->
                    </div>


                    <div class="buy-bottom">
                        <a class="buy" href="#">立即购买</a>
                        <a class="cart" href="#">加入购物车</a>
                    </div>
                </div>


            </div>

            <!-- 详情介绍 -->
            <div class="details">
                <ul class="details-nav clearflx">
                    <li class="details-nav-list clearflx">
                        <a class="pitch" href="#">商品详情</a>
                    </li>
                    <li class="details-nav-list">
                        <a href="#">商品评价</a>
                    </li>
                    <li class="details-nav-list">
                        <a href="#">购买咨询</a>
                    </li>
                </ul>
            </div>

            <!-- 产品参数 -->
            <div class="arguments clearflx">
                <h3>产品参数：</h3>
                <div class="arguments-left">
                    <p>产品货号：448126000</p>
                    <p>上市季节：2022年春季</p>
                    <p><span>商品尺码：</span>150/76A/XS 155/80A/S 160/84A/M
                        160/88A/L 165/92A/XL 170/100B/XXL
                        175/108C/3XL</p>
                </div>
                <div class="arguments-right">
                    <p>商品颜色：00白色 10水粉色 54绿色 67蓝色</p>
                    <p><span>商品材质：</span>[面料]尼龙100%，[亲里]聚酯纤维100%，
                        [填充物]聚酯纤维100%，[包边]尼龙100%</p>
                </div>

            </div>

            <!-- 产品展示 -->
            <div class="unify">
                <!-- 产品标题 -->
                <h3 class="title-unify"><i></i>产品展示</h3>

                <img class="recommend-img" src="images/recommend-img.png" alt="">
            </div>
            <!-- 产品尺寸 -->
            <div class="unify">
                <h3 class="title-unify"><i></i>产品尺寸</h3>
                <img class="list-img" src="images/list-img.png" alt="">
            </div>
            <!-- 产品细节 -->
            <div class="unify">
                <h3 class="title-unify"><i></i>产品细节</h3>
                <img class="details-img" src="images/details-img.png" alt="">
            </div>
            <!-- 商品说明 -->
            <div class="unify">
                <h3 class="title-unify"><i></i>商品说明</h3>
                <img class="state-img" src="images/state-img.png" alt="">
            </div>
            <!-- 注意事项 -->
            <div class="unify">
                <img class="required-img" src="images/required-img.png" alt="">
            </div>

            <div class="unify push">
                <h3 class="title-unify"><i></i>店铺推荐</h3>
                <div class="product">
                    <ul class="product-ul">
                        <li class="product-li">
                            <a href="#">
                                <img class="product-imgs" src="images/位图备份.png" alt="">
                                <p class="name">设计师合作款·千鸟格大衣 冬季上新【羊毛】</p>
                                <p class="saiz">【S-XL】</p>
                                <p class="price">¥799</p>
                                <img class="sml-img1" src="images/like.png" alt="">
                                <img class="sml-img2" src="images/购物车.png" alt="">
                            </a>
                        </li>
                        <li class="product-li li2">
                            <a href="#">
                                <img class="product-imgs" src="images/位图备份.png" alt="">
                                <p class="name">设计师合作款·千鸟格大衣 冬季上新【羊毛】</p>
                                <p class="saiz">【S-XL】</p>
                                <p class="price">¥799</p>
                                <img class="sml-img1" src="images/like.png" alt="">
                                <img class="sml-img2" src="images/购物车.png" alt="">
                        </li>
                        <li class="product-li li3">
                            <a href="#">
                                <img class="product-imgs" src="images/位图备份.png" alt="">
                                <p class="name">设计师合作款·千鸟格大衣 冬季上新【羊毛】</p>
                                <p class="saiz">【S-XL】</p>
                                <p class="price">¥799</p>
                                <img class="sml-img1" src="images/like.png" alt="">
                                <img class="sml-img2" src="images/购物车.png" alt="">
                        </li>
                       
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer-c">
            <div class="foot-content">
                <img class="foot-logo" src="images/logo.png" alt="">
                <ul>
                    <li>门店资讯</li>
                    <li class="li">|</li>
                    <li> 网络购物FAQ </li>
                    <li class="li">|</li>
                    <li> 关于BALANCE</li>
                    <li class="li">|</li>
                    <li>电子报订阅</li>
                    <li class="li">|</li>
                    <li> 买卖定型化契约</li>
                    <li class="li">|</li>
                    <li>政府政令宣传</li>
                </ul>

                <ul class="foot-tow">
                    <li>Copyright © BALANCE Ltd. All rights reserved</li>
                </ul>

                <div class="foot-img">
                    <img class="foot-img-one" src="images/qr-02.png" alt="">
                    <img class="foot-img-tow" src="images/qr.png" alt="">
                </div>
            </div>

        </div>
    </footer>
</body>

</html>